<template>
    <div class="wecom" :style="{ 'margin-bottom': props.options.space + 'px' }">
        <div class="wecom-left">
            <image mode="aspectFill" :src="props.options.titleIcon" class="wecom-img"></image>
            <div class="wecom-square">
                <div class="wecom-title">{{ props.options.title }}</div>
                <div class="wecom-desc">{{ props.options.description }}</div>
            </div>
        </div>
        <div class="wecom-right" :style="{ background: props.options.btnColor }" @click="jump(props.options)">
            {{ props.options.btnText }}
        </div>
    </div>
</template>
<script setup name="wecom">
const emit = defineEmits(['jump']);
const props = defineProps({
    options: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isUniapp: {
        type: Boolean,
        default: false
    }
});
const jump = item => {
    if (props.isUniapp) {
        emit('jump', item);
    }
};
</script>
<style lang="scss" scoped>
.wecom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff;
    &-left {
        display: flex;
        align-items: center;
    }
    &-title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
    }
    &-square {
        display: flex;
        flex-direction: column;
    }
    &-desc {
        padding-top: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
    }
    &-img {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    &-right {
        flex-shrink: 0;
        width: 90px;
        height: 36px;
        background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
        border-radius: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 36px;
        text-align: center;
    }
}
</style>
